<!-- 书架界面 -->
<template>
	<view class="fixbg" v-if="imageURL && imageURL!=''" :style="{'background-image' : 'url(' + imageURL + ')'}">
		<view :class="[imageclass]">
			<view class="x_moveline">
				<view class="swiper">
					<swiper class="swiperin" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
						<swiper-item v-for="item in book_float.data">							
							<image class="_image" :src="item.pic_move.url"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="y_moveline">
				<scroll-view class="y_scroll" scroll-y="true" >
					<view class="firstline">
						<view class="book" @click="handleToindex(content.book1_id)">
							<image class="_image" :src="content.book1.url"></image>
						</view>
						<view class="book" @click="handleToindex(content.book2_id)">
							<image class="_image" :src="content.book2.url"></image>
						</view>
						<view class="book" @click="handleToindex(content.book3_id)">
							<image class="_image" :src="content.book3.url"></image>
						</view>
					</view>
					<view class="secondline">
						<view class="book" @click="handleToindex(content.book4_id)">
							<image class="_image" :src="content.book4.url"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:{},
				book_float:{},
				imageclass: 'image',
				imageURL:'',
				rempage:0,
				book_float:[]
			}
		},
		
		onLoad(e) {//在页面加载时获取数据
			// console.log("接收e的具体值为：",e)
			this.getbehind(),
			this.getbookshelf(),
			this.getmbook()
			// console.log("接收e的具体值为：",e)
		},
		
		methods: {
			// 跳转界面
			handleToindex(e){
				// console.log(e)
				uni.redirectTo({
					url:"../book_cover/book_cover?nextid=" + e
				})
			},
			//获取书架基础内容以及其中的书
			getbookshelf(){
				const db = uniCloud.database()
				const collection = db.collection('bookshelf')
				let res = collection.where({shelf_id:1})
				.get()
				.then(res => {
					//console.log(res)//调试，将内容打印到consolelog界面
					this.content = res.result.data[0]
				})
			},
			//获取书架背景
			getbehind(){
				const db = uniCloud.database()
				const collection = db.collection('book_shelf_behind')
				let res = collection.where({pic_id:1})
				.get()
				.then(res => {
					//console.log(res)//调试，将内容打印到consolelog界面
					this.imageURL = res.result.data[0].behind_pic.url
				})
			},
			//获取书籍动态推荐栏的内容
			getmbook(){
				const db = uniCloud.database()
				const collection = db.collection('pic_float')
				let res = collection.where({Type:1})
				.get()
				.then(res => {
					//调试，将内容打印到consolelog界面
					this.book_float = res.result
					// console.log("动态书籍内容",this.book_float)
				})
			}
		}
	}
</script>

<style>
	.image{
		height: 100%;/*屏幕大小750rpx * 1400rpx*/
		display: flex;
		flex-direction: column;
		/* top:calc(var(--window-top) + 10px) */
	}
	.y_scroll{
		/* height: 100%; */
	}
	.x_scroll{
		/* height: 100%; */
		margin: 0rpx 50rpx 0rpx 50rpx;
	}
	._image{
		height: 100%;
		width: 100%;
	}
	.x_moveline{
		height: 500rpx;/*屏幕大小750rpx * 1400rpx*/
		width: 750rpx;
		display: flex;
		flex-direction: row;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}
	.swiper{
		width: 100%;
		height: 100%rpx;
		margin: 100rpx 30rpx 0rpx 30rpx;
	}
	.swiperin{
		width: 100%;
		height: 350rpx;
	}
	.y_moveline{
		height: 100%;/*屏幕大小750rpx * 1400rpx*/
		display: flex;
		flex-direction: column;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}
	.firstline{
		height: 300rpx;/*屏幕大小750rpx * 1400rpx*/
		display: flex;
		flex-direction: row;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}
	.secondline{
		height: 300rpx;/*屏幕大小750rpx * 1400rpx*/
		display: flex;
		flex-direction: row;
		margin: 90rpx 0rpx 0rpx 0rpx;
	}
	.book{ 
		width: 200rpx;
		height: 300rpx;
		margin: 0rpx 0rpx 0rpx 37.5rpx;/*上右下左注意小盒子的margin是从第一个盒子开始算起的*/
	}
</style>
